<template>
  <div
    class="ai-icon"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    @mousedown="startDrag"
    @mouseup="handleMouseUp"
    :size="60"
    @click="openDialog"
  ></div>
  <el-dialog
    v-model="dialogVisible"
    :draggable="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="30px"
    width="1000px"
    header-class="my-header-class"
    :destroy-on-close="true"
  >
    <iframe
      src="https://yggpt.ygsoft.com/yggpts/chat/share?shareId=b1naf3iwfpw8njfq8ocyfbnp"
      style="width: 100%; height: 60vh"
      frameborder="0"
      allow="microphone"
    ></iframe>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="aiRobot">
import { ref } from "vue";
const position = ref({ x: window.innerWidth - 120, y: window.innerHeight - 140 });
const dialogVisible = ref(false);
const isDragging = ref(false); // 新增标志位

const startDrag = (event: MouseEvent) => {
  const offsetX = event.clientX - position.value.x;
  const offsetY = event.clientY - position.value.y;

  const onMouseMove = (e: MouseEvent) => {
    isDragging.value = true; // 设置为拖动状态
    position.value.x = e.clientX - offsetX;
    position.value.y = e.clientY - offsetY;
  };

  const onMouseUp = () => {
    window.removeEventListener("mousemove", onMouseMove);
    window.removeEventListener("mouseup", onMouseUp);
    setTimeout(() => {
      isDragging.value = false; // 重置标志位
    }, 100);
  };

  window.addEventListener("mousemove", onMouseMove);
  window.addEventListener("mouseup", onMouseUp);
};

const handleMouseUp = () => {
  // 如果是拖动状态，则不执行点击事件
  if (isDragging.value) {
    setTimeout(() => {
      isDragging.value = false; // 重置标志位
    }, 100);
  } else {
    openDialog(); // 不是拖动状态，执行点击事件
  }
};
const openDialog = () => {
  if (!isDragging.value) {
    dialogVisible.value = true;
  }
};
</script>

<style scoped lang="scss">
.ai-icon {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 9999; /* 确保图标在最上层 */
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url("@/assets/images/robot.png");
  background-position: center center;
  background-size: 200%;
  border-radius: 25px; /* 可选：添加圆角 */
  box-shadow: 0 8px 16px rgb(0 0 0 / 30%); /* 鼠标悬停时加深阴影 */
}
.my-header-class {
  border-bottom: none !important;
}
</style>
